<template>
  <tm-drawer
    ref="calendarView"
    v-model:show="showWin"
    :placement="'bottom'"
    :height="1100"
    :in-content="true"
    :hide-header="true"
  >
    <view class="product-box">
      <view class="des">
        <view class="image-box">
          <image :src="showSkuInfo.image" mode="scaleToFill" />
        </view>

        <view class="text-box">
          <view class="name txt">{{ showSkuInfo.description }}</view>
          <view class="selected txt">
            <text>已选</text>
            <text v-for="(item, index) in sku.selectItemList" :key="index">{{
              '\t' + item.attrValue
            }}</text>
          </view>

          <!-- <view class="price-box txt">
            <view class="price">
              <text class="mark">￥</text>
              <text class="yg-price">21.9</text>
            </view>
          </view> -->

          <view class="price-box txt">
            <view class="price">
              <text class="mark">￥</text>
              <text class="yh-price">{{ showSkuInfo.price }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="number-box">
        <view class="txt">购买数量</view>
        <view class="count">
          <tm-stepper
            v-model="sku.goodsNumber"
            :min="1"
            :default-value="1"
          ></tm-stepper>
        </view>
      </view>

      <scroll-view :style="{ height: `500rpx` }" scroll-y="true">
        <view class="specs ul">
          <view v-for="item in (list as any)" :key="item.id" class="li">
            <view class="title"> {{ item.attrName }} </view>

            <view class="item-box">
              <view
                v-for="item1 in item.children"
                :key="item1.id"
                :class="`item ${item1.isChecked ? 'item1' : 'item2'}`"
                @click="selectItemHandle(item1, item.id)"
                >{{ item1.attrValue }}</view
              >
              <view
                v-for="(item2, index) in 3 - item.children.length"
                :key="index"
                style="opacity: 0"
                class="item"
              ></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="button-box" @click="submitSelectHandle">
      <view class="button">选好了</view>
    </view>
    <!-- inContent -->
    <!-- <tm-picker :height="500" inContent v-model:show="showWin2" :columns="citydate"></tm-picker> -->
  </tm-drawer>
</template>
<script lang="ts" setup>
import { toRefs, watch, PropType, onMounted } from 'vue'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'

const emit = defineEmits(['selectItemHandle', 'submitSelectHandle'])
const props = defineProps({
  menuData: {
    type: Array,
    default: () => {
      return {}
    },
  },

  list: {
    type: Array<Object>,
    default: '',
  },
  defaultSku: {
    type: Object,
    default: () => {
      return []
    },
  },
  showSkuInfo: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const { list, defaultSku } = toRefs(props)

const calendarView = ref()

const showWin = ref(false)

const sku = reactive({
  selectItemList: defaultSku.value,
  goodsNumber: 1,
  list: [] as Array<any>,
})

watch(
  () => defaultSku.value,
  () => {
    sku.selectItemList = defaultSku.value
  }
)

/**
 * 选好了
 */
const submitSelectHandle = () => {
  emit('submitSelectHandle', sku.selectItemList, sku.goodsNumber)
}

const close = () => {
  showWin.value = false
}

function open() {
  showWin.value = true

  const spec = [
    [',1:9', ',1:10', ',1:11'],
    [',2:12', ',2:13'],
    [',3:14', ',3:15', ',3:16'],
  ]

  const getSku: any = (specs: any) => {
    return specs.reduce(
      (prev: any, next: any) => {
        let arr: any = []
        // 两层遍历，将每一层的子项数组合并为同一个数组
        prev.forEach((p: any) => {
          next.forEach((n: any) => {
            arr.push(p.concat([n]))
          })
        })
        return arr
      },
      [[]]
    ) // 初始值是一个空二维数组
  }

  let arr1: any[] = []

  getSku(spec).forEach((v: any) => {
    let mark = '1640755004200554499'
    v.forEach((k: any) => {
      mark += k
    })
    arr1.push({
      goodsId: '1640755004200554499',
      price: (Math.random() * 10 + 10).toFixed(2),
      mark: mark,
      description: '柠檬红茶',
      image:
        'http://upyun-cdn.hyunst.com/hy/2209282739CFA24AB6_md/100122/2022-9-29/04ef517b5426.png',
      stock: 100,
    })
  })

  sku.list = arr1

  // request('/test/add', 'POST', {
  //   skuList: arr1 as any,
  // })

  console.log(arr1, '123')
}
const selectItemHandle = (item: any, index: number) => {
  let selectItemList = [] as Array<any>
  list.value.filter((v: any, i) => {
    if (v.id === item.attrId) {
      v.children.filter((item1: any, index: number) => {
        if (item1.id === item.id) {
          item1.isChecked = true
        } else {
          item1.isChecked = false
        }
      })
    }
  })

  /**
   * 找到已选的参数信息list
   */
  list.value.forEach((v1: any, i1: number) => {
    v1.children.forEach((v2: any, i1: number) => {
      if (v2.isChecked) {
        selectItemList.push(v2)
      }
    })
  })
  sku.selectItemList = selectItemList
  emit('selectItemHandle', selectItemList, list.value)
}

let goodsInfo = reactive({
  defaultSku: {},
})

defineExpose({
  close,
  open,
})
</script>
<style lang="scss" scoped>
.product-box {
  width: 100vw;
  height: 900rpx;

  position: relative;
  bottom: 0px;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: hidden;

  .des {
    width: 95%;
    height: auto;
    display: flex;

    .image-box {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;

      > image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
    .text-box {
      margin-left: 30rpx;
      .txt {
        margin-bottom: 20rpx;
        color: #1a1a1a;
        font-size: 1rem;
      }

      .name {
        font-weight: 700;
      }
    }
    .selected {
      color: #9e9e9e;
      font-size: 0.7rem;

      > text {
        color: #9e9e9e;
        font-size: 0.7rem;
      }
    }

    .price-box {
      .price {
        color: #fe1c00;

        font-size: 1rem;
        .mark {
          font-size: 0.7rem;
        }
      }
    }
  }

  .number-box {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    margin: 30rpx 0;

    .count {
      position: absolute;
      right: 0;
    }
  }

  .specs {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .li {
      width: 100%;
      display: flex;
      flex-direction: column;

      .title {
        font-weight: 700;
        font-size: 0.9rem;
        color: #1a1a1a;
        margin-bottom: 20rpx;
      }

      .item-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 50rpx;
        font-size: 0.7rem;

        .item {
          width: 25%;
          padding: 15rpx 0;
          border-radius: 20rpx;
          border: 0.0625rem solid rgb(230, 230, 230);
          background-color: rgb(245, 245, 245);
          color: rgb(38, 38, 38);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item1 {
          border: 0.0625rem solid rgb(204, 224, 255);
          background-color: rgb(235, 242, 255);
          color: rgb(1, 99, 255);
        }
      }
    }
  }
}

.button-box {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
  .button {
    width: 90%;
    height: 85rpx;
    background-color: #40a9ff;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
